<template>
  <div class="func-bar">
    <div class="func-item" @click="highLight('sale')">
      <span :class="{'red':sale}">销量</span>
      <div class="icons">
        <img v-if="sale===0" src="img/icon-sort-up.png"/>
        <img v-if="sale===1" src="img/icon-sort-up-checked.png"/>
        <img v-if="sale===2" src="img/icon-sort-down-checked.png"/>
      </div>
    </div>
    <div class="func-item" @click="highLight('price')">
      <span :class="{'red':price}">价格</span>
      <div v-if="price===0" class="icons">
        <img class="up" src="img/icon-up.png"/>
        <img class="down" src="img/icon-down.png"/>
      </div>
      <div v-if="price===1" class="icons">
        <img class="up" src="img/icon-up-checked.png"/>
        <img class="down" src="img/icon-down.png"/>
      </div>
      <div v-if="price===2" class="icons">
        <img class="up" src="img/icon-up.png"/>
        <img class="down" src="img/icon-down-checked.png"/>
      </div>
    </div>
    <div class="func-item" @click="highLight('discount')">
      <span :class="{'red':discount}">折扣</span>
      <div v-if="discount===0" class="icons">
        <img class="up" src="img/icon-up.png"/>
        <img class="down" src="img/icon-down.png"/>
      </div>
      <div v-if="discount===1" class="icons">
        <img class="up" src="img/icon-up-checked.png"/>
        <img class="down" src="img/icon-down.png"/>
      </div>
      <div v-if="discount===2" class="icons">
        <img class="up" src="img/icon-up.png"/>
        <img class="down" src="img/icon-down-checked.png"/>
      </div>
    </div>
    <div class="func-item" @click="filterHandler('filter')">
      <span :class="{'red':filterValue}">筛选</span>
      <div class="icons">
        <img v-if="filterValue===0" src="img/icon-filter.png"/>
        <img v-if="filterValue===1" src="img/icon-filter-checked.png"/>
      </div>
    </div>
    <div class="func-item view" @click="cardHandler('card')">
      <div class="icons">
        <img v-if="cardView===0" src="img/icon-card.png"/>
        <img v-if="cardView===1" src="img/icon-list.png"/>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import Vue from 'vue'

Vue.use(Toast)
export default {
  name: 'FilterBar',
  props: {
    filter: {
      type: Number,
      default: 0
    },
    card: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      // 0不排序 1升序 2降序
      sale: 0,
      // 0不排序 1升序 2降序
      price: 0,
      // 0不排序 1升序 2降序
      discount: 0,
      filterValue: 0,
      // 0显示卡片 1显示列表
      cardView: 0
    }
  },
  methods: {
    highLight (type) {
      let list = ['sale', 'price', 'discount']
      const length = 3
      list.forEach((item) => {
        if (item !== type) {
          this[item] = 0
        } else {
          this[type] = (this[type] + 1) % length
        }
      })
      this.toast(type, this[type])
      this.$emit('types', type, this[type])
    },
    filterHandler (type) {
      this.sale = this.discount = this.price = 0
      this.$emit('types', type, this[type])
    },
    cardHandler (type) {
      this.$emit('types', type)
    },
    toast (type, state) {
      let dict = {
        sale: '销量',
        price: '价格',
        discount: '折扣',
        filter: ''
      }
      let msg = ''
      state ? (state === 1 ? msg = '升序排序' : msg = '降序排序') : msg = '取消排序'
      this.filterValue = 0
      state && Toast({
        message: dict[type] + msg
      })
    }
  },
  watch: {
    filter (value) {
      this.filterValue = value
    },
    card (value) {
      this.cardView = value
    }
  }
}
</script>

<style lang="scss" scoped>
.func-bar {
  display: flex;
  height: 45px;
  font-size: 14px;
  text-align: center;
  align-items: center;

  .view {
    display: flex;
    flex: 0 !important;
    justify-content: center;
    align-items: center;

    img {
      width: 18px !important;
      margin-right: 10px;
    }
  }

  .func-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;

    .icons {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-evenly;

      img {
        width: 15px;
        margin-left: 4px;
      }

      .up {
        position: relative;
        top: 1.5px;
        width: 10px;
      }

      .down {
        position: relative;
        width: 10px;
        bottom: 1.5px;
      }
    }
  }
}

.red {
  color: #EE0A24;
}
</style>
